<template>
	<div class="game-container">
		<div class="params">
			<el-form
				ref="formRef"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<!-- <el-form-item
					:label="$t('common.belong_merchant') + ':'"
					class="flex-row-container"
					label-width="77px"
				>
					<merchant-select
						v-model="merchantId"
						:merchantInfo.sync="merchantObj"
					></merchant-select>
				</el-form-item> -->
				<el-form-item
					label="日报期数"
					class="flex-row-container"
					label-width="100px"
				>
					<el-date-picker
						v-model="dateValue"
						type="date"
						range-separator="-"
						:start-placeholder="$t('report.start_date')"
						:picker-options="pickerShortcut4"
						@change="getTime"
						:clearable="false"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<span
						v-for="(item, index) in clickDataList"
						:key="index"
						@click="clickDataFun(item)"
						class="font-span"
					>
						{{ item.label }}
					</span>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						size="medium"
						@click="refreshClick"
					>
						查询
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div v-if="merchantIdStr">
			<tableDataDaily
				:merchantId="merchantId"
				:dateValue="formatDate"
				ref="tableDataDailyRef"
			></tableDataDaily>
			<tableDataComparison
				:merchantId="merchantId"
				:dateValue="formatDate"
				ref="tableDataComparisonRef"
			></tableDataComparison>
			<tableProject
				:merchantId="merchantId"
				:dateValue="formatDate"
				ref="tableProjectRef"
			></tableProject>
			<tableTodayProfit
				:merchantId="merchantId"
				:dateValue="formatDate"
				ref="tableTodayProfitRef"
			></tableTodayProfit>
			<tableTodayAgent
				:merchantId="merchantId"
				:dateValue="formatDate"
				ref="tableTodayAgentRef"
			></tableTodayAgent>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import tableDataDaily from './index_table/tableDataDaily.vue'
import tableDataComparison from './index_table/tableDataComparison.vue'
import tableProject from './index_table/tableProject.vue'
import tableTodayProfit from './index_table/tableTodayProfit.vue'
import tableTodayAgent from './index_table/tableTodayAgent.vue'
import dayjs from 'dayjs'

const setSearchTime = () => [
	dayjs()
		.subtract(0, 'day')
		.startOf('day'),
	dayjs()
		.subtract(0, 'day')
		.endOf('day')
]
export default {
	name: 'DataDaily',
	components: {
		tableDataDaily,
		tableDataComparison,
		tableProject,
		tableTodayProfit,
		tableTodayAgent
	},
	mixins: [list],
	data() {
		return {
			clickDataList: [
				{ label: '今日', value: 0 },
				{ label: '昨日', value: 1 },
				{ label: '前日', value: 2 }
			],
			clickDataIndex: 0,
			tableData: [],
			merchantObj: '',
			merchantId: this.$store.getters.merchantInfo.id || '',
			merchantIdStr: '',
			queryData: {},
			dateValue: setSearchTime()[0],
			formatDate: setSearchTime()[0]
		}
	},
	created() {},
	mounted() {
		this.refreshClick()
	},
	methods: {
		/**
		 * 数据筛选栏--带商户id的请求
		 */
		clickDataFun(item) {
			const today = new Date()
			const yesterday = new Date()
			yesterday.setDate(today.getDate() - 1)
			const dayBeforeYesterday = new Date()
			dayBeforeYesterday.setDate(today.getDate() - 2)
			if (item.value === 0) {
				this.dateValue = dayjs(today.toDateString())
					.subtract(0, 'day')
					.endOf('day')
			} else if (item.value === 1) {
				this.dateValue = dayjs(yesterday.toDateString())
					.subtract(0, 'day')
					.endOf('day')
			} else if (item.value === 2) {
				this.dateValue = dayjs(dayBeforeYesterday.toDateString())
					.subtract(0, 'day')
					.endOf('day')
			}
			this.formatDate = this.dateValue
			this.clickDataIndex = item.value
		},
		getTime(e) {
			// this.isFormatDate(e)
			this.formatDate = dayjs(new Date(e).toDateString())
				.subtract(0, 'day')
				.endOf('day')
		},
		isFormatDate(dateString) {
			const today = new Date()
			const yesterday = new Date(today)
			yesterday.setDate(today.getDate() - 1)
			const dayBeforeYesterday = new Date(today)
			dayBeforeYesterday.setDate(today.getDate() - 2)
			const date = new Date(dateString)
			if (date.toDateString() === today.toDateString()) {
				this.clickDataIndex = 0
			} else if (date.toDateString() === yesterday.toDateString()) {
				this.clickDataIndex = 1
			} else if (
				date.toDateString() === dayBeforeYesterday.toDateString()
			) {
				this.clickDataIndex = 2
			} else {
				this.clickDataIndex = 999
			}
		},
		refreshClick() {
			// if (!this.merchantId) {
			// 	return this.$message.warning('请选择商户后再进行查询')
			// }
			this.merchantIdStr = JSON.stringify(this.merchantId)
			this.$refs.tableDataDailyRef?.loadData()
			this.$refs.tableDataComparisonRef?.loadData()
			this.$refs.tableProjectRef?.loadData()
			this.$refs.tableTodayProfitRef?.loadData()
			this.$refs.tableTodayAgentRef?.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
.params {
	padding: 0px 20px 10px 20px !important;
	margin-bottom: 20px;
	margin-top: none !important;
	border-radius: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;

	.chose-merchant {
		text-align: right;
		vertical-align: middle;
		float: left;
		font-size: 14px;
		color: #606266;
		line-height: 40px;
		padding: 0 12px 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-weight: 700;
	}

	.font-span {
		cursor: pointer;
		margin-right: 10px;
		&:hover {
			color: #02a7f0;
		}
	}

	.font-active {
		color: #02a7f0;
	}
}

::v-deep .el-col-2 {
	width: 100%;
	line-height: 40px;
	color: #606266;
	font-weight: 700;
	border-radius: 4px;
	box-sizing: border-box;
	border: 1px solid #dcdfe6;
	height: 36px;
	line-height: 36px;
	display: inline-block;
	font-size: inherit;
	padding: 0 15px;
	position: relative;
}
</style>
